<template>
	<div class="empty">
		<div class="warp">
			<img alt src="./images/empty.png" v-if="!isLoading" />

			<div class="sk-chase" v-else>
				<div class="sk-chase-dot"></div>
				<div class="sk-chase-dot"></div>
				<div class="sk-chase-dot"></div>
				<div class="sk-chase-dot"></div>
				<div class="sk-chase-dot"></div>
				<div class="sk-chase-dot"></div>
			</div>
			<p class="empty-text">
				<slot>{{isLoading?'加载中':'暂无数据'}}</slot>
			</p>
		</div>
	</div>
</template>
<script>
export default {
	props: {
		/**
		 * 是否是加载样式
		 */
		isLoading: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {}
	},
	methods: {}
}
</script>
<style lang="scss" scoped>
.empty {
	width: 100%;
	height: 100%;
	position: relative;
	background-color: $color-bg-card;
	.warp {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		.empty-text {
			color: $color-text-secondary;
		}

		.sk-chase {
			width: 40px;
			height: 40px;
			margin: 0 auto 20px;
			position: relative;
			animation: sk-chase 2.5s infinite linear both;
		}

		.sk-chase-dot {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			animation: sk-chase-dot 2s infinite ease-in-out both;
		}

		.sk-chase-dot:before {
			content: '';
			display: block;
			width: 25%;
			height: 25%;
			background-color: $color-theme;
			border-radius: 100%;
			animation: sk-chase-dot-before 2s infinite ease-in-out both;
		}

		.sk-chase-dot:nth-child(1) {
			animation-delay: -1.1s;
		}
		.sk-chase-dot:nth-child(2) {
			animation-delay: -1s;
		}
		.sk-chase-dot:nth-child(3) {
			animation-delay: -0.9s;
		}
		.sk-chase-dot:nth-child(4) {
			animation-delay: -0.8s;
		}
		.sk-chase-dot:nth-child(5) {
			animation-delay: -0.7s;
		}
		.sk-chase-dot:nth-child(6) {
			animation-delay: -0.6s;
		}
		.sk-chase-dot:nth-child(1):before {
			animation-delay: -1.1s;
		}
		.sk-chase-dot:nth-child(2):before {
			animation-delay: -1s;
		}
		.sk-chase-dot:nth-child(3):before {
			animation-delay: -0.9s;
		}
		.sk-chase-dot:nth-child(4):before {
			animation-delay: -0.8s;
		}
		.sk-chase-dot:nth-child(5):before {
			animation-delay: -0.7s;
		}
		.sk-chase-dot:nth-child(6):before {
			animation-delay: -0.6s;
		}

		@keyframes sk-chase {
			100% {
				transform: rotate(360deg);
			}
		}

		@keyframes sk-chase-dot {
			80%,
			100% {
				transform: rotate(360deg);
			}
		}

		@keyframes sk-chase-dot-before {
			50% {
				transform: scale(0.4);
			}
			100%,
			0% {
				transform: scale(1);
			}
		}

		img {
			width: 100px;
			height: 100px;
			margin-bottom: 5px;
		}
		p {
			font-size: 12px;
		}
	}
}
</style>
